import Icon from '@/components/Icon'
import { addChannel, delChannles } from '@/store/actions/home'
import { Toast } from 'antd-mobile'
import classNames from 'classnames'
import { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import styles from './index.module.scss'

const Channels = ({ onClose, index, onChange }) => {
  const dispatch = useDispatch()
  // 控制模式的切换
  const [editing, setEditing] = useState(false)
  const userChannels = useSelector(state => state.home.userChannels)
  const recommedChannels = useSelector(state => {
    // 获取推荐频道，所有频道减去我的频道就是推荐频道
    const { userChannels, allChannels } = state.home
    return allChannels.filter(item => {
      return userChannels.findIndex(v => v.id === item.id) === -1
    })
  })
  // 删除频道
  const delChannel = (channel, i) => {
    if (userChannels.length <= 4) {
      Toast.show({
        content: '频道最少保留四个'
      })
      return
    }
    // console.log(channel);
    dispatch(delChannles(channel))
    // 删除的时候处理高亮
    if (i === index) {
      onChange(0)
    }
    if (i < index) {
      onChange(index - 1)
    }
  }
  // 添加频道
  const add = async (channel) => {
    // console.log(channel);
    await dispatch(addChannel(channel))
  }
  return (
    <div className={styles.root}>
      {/* 顶部栏：带关闭按钮 */}
      <div className="channel-header">
        <Icon type="iconbtn_channel_close" onClick={onClose} />
      </div>

      {/* 频道列表 */}
      <div className="channel-content">
        {/* 当前已选择的频道列表 */}
        <div className={classNames('channel-item', editing ? 'edit' : '')}>
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">
              {editing ? '点击删除频道' : '点击进入频道'}
            </span>
            <span className="channel-item-edit" onClick={() => setEditing(!editing)}>
              {editing ? '保存' : '编辑'}
            </span>
          </div>

          <div className="channel-list">
            {
              userChannels.map((item, i) => (
                <span
                  className={classNames('channel-list-item', i === index ? 'selected' : '')}
                  key={item.id}
                  onClick={() => {
                    if (editing) return
                    onClose()
                    onChange(i)
                  }}
                >
                  {item.name}
                  {
                    item.id !== 0 && <Icon type="iconbtn_tag_close" onClick={() => delChannel(item, i)} />
                  }
                </span>
              ))
            }
          </div>
        </div>

        {/* 推荐的频道列表 */}
        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道推荐</span>
            <span className="channel-item-title-extra">点击添加频道</span>
          </div>
          <div className="channel-list">
            {
              recommedChannels.map(item => (
                <span key={item.id} className="channel-list-item" onClick={() => add(item)}>
                  {item.name}
                </span>
              ))
            }
          </div>
        </div>
      </div>
    </div>
  )
}

export default Channels